@extends('admin::index')

@section('content')
    <section class="content-header">
        <h1>
            {{ $edit_header or trans('admin.title') }}
            <small>{{ $edit_description or trans('admin.description') }}</small>
        </h1>

    </section>
    <section class="content">
        {{-- tian add flash --}}
        @include('flash::message')
        @include('admin::partials.error')
        @include('admin::partials.success')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')
      @php
      @endphp
            <div class="box">
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <input type="hidden" id="muticolumn_id" value="{{ $muticolumn->id }}" />

                <!-- table start -->
                <div class="row col-lg-12">
                    <div class="animated fadeInUp">
                        <div class="ibox">
                            <div class="ibox-title" style="color: inherit;margin-bottom: 0;padding: 0px 15px 7px;min-height: 48px;">
                                <h5>
                                    <!-- 所有项目 -->
                                </h5>
                                <div class="ibox-tools rboor" style="background-color: #ffffff;color: inherit;padding: 15px 20px 20px 20px;border-color: #e7eaec;border-image: none;border-style: solid solid none;border-width: 1px 0px;">
                                    <a class="btn btn-default btn-sm" id="back-album-asset" href="javascript:void(0);" onclick="history.go(-1)">
                                        <i class="fa fa-arrow-left">
                                        </i>
                                        返回
                                    </a>
                                    <a class="btn btn-danger btn-sm" id="batch-delete-muticolumn-asset" href="javascript:void(0);">
                                        <i class="im-remove4">
                                        </i>
                                        批量删除
                                    </a>
                                    <button class="btn btn-success btn-sm" href="javascript:void(0);" id="muticolumn-asset-selected-refresh">
                                        <i class="im-spinner10 fa-spin">
                                        </i>
                                        刷新
                                    </button>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <!-- search start -->
                                <div class="form-horizontal clearfix">
                                    <div class="col-lg-4 col-sm-3 pl0">
                                        <div class="form-group">
                                            <label class="col-lg-3 col-sm-3 control-label">
                                                数据类型：
                                            </label>
                                            <div class="col-lg-8 col-sm-7">
                                                <select class="input-sm form-control input-s-sm inline" id="muticolumn-asset-selected-date-type">
                                                    <option value="">
                                                        请选择
                                                    </option>
                                                    @foreach ($dataTypes as $value)
                                                        <option value="{{ $value['id'] }}">{{ $value['title'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-4">
                                        <div class="form-group">
                                            <div class="col-lg-12 col-sm-12 input-group">
                                                <input class="input-sm form-control" placeholder="请输入关键字" type="text" id="muticolumn-asset-selected-search-value">
                                                    <span class="input-group-btn">
                                                        <button class="btn btn-sm btn-primary" type="button" id="album-asset-selected-search">
                                                            搜索
                                                        </button>
                                                    </span>
                                                </input>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- search end -->
                                <!-- 表格-已选的媒资数据 -->
                                <table cellspacing="0" class="table table-striped table-bordered table-hover dataTables-example dataTable" id="muticolumn-asset-selected-table" width="100%">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- table end -->
            </div>
        </div>
    </section>
    <script type="text/javascript">
    $(function () {
        // 防止csrf
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        /**
         * 专辑选中的媒资
         */
        // 已选的媒资数据-datatables渲染
        muticolumnAssetSelectedTable = $('#muticolumn-asset-selected-table').DataTable({
            // "processing": true,
            // 服务器端渲染
            "serverSide": true,
            // 请求数据的形式(get, post), 请求的路径
            ajax: {
                url: "/admin/application/muticolumns/asset_datas/selected",
                type: "post",
                data: function(d) {
                    // 数据类型
                    d.data_type = $('#muticolumn-asset-selected-date-type').val();
                    // 搜索框
                    d.search_value = $('#muticolumn-asset-selected-search-value').val();
                    // 专辑id
                    d.muticolumn_id = $('#muticolumn_id').val();
                }
            },
            columns: [{
                orderable: false,
                data: "id",
                render: function(id) {
                    return '<input type="checkbox" data-id="' + id + '" name="checkbox-muticolumn-asset-selected">'
                },
                title: '<input id="muticolumn-asset-selected-check-all" name="" type="checkbox" value=""/>全选/反选',
                width: "10%"
            }, {
                 title: "数据类型",
                orderable: false,
                width: "5%",
                "render": function(data, type, row, meta) {
                    // return "<a class='btn btn-danger btn-xs' href='javascript:void(0);'" + "onclick='_deleteAlbumAsset(\"" + row['id'] + "\")'>删除</a>";
                    if (row['asset_type']==1){
                        return '<span class="badge bg-green">视频</span>';
                    }else if(row['asset_type']==2){
                        return '<span class="badge bg-green">音频</span>';
                    }else if(row['asset_type']==3){
                        return '<span class="badge bg-green">图文</span>';
                    }
                    // console.log(data, type, row, meta);
                        // return '<span class="badge bg-green">视频</span>';
                }
            },{
                // 列名
                title: "资源ID",
                // 数据
                data: "id",
                // 能否进行排序
                orderable: false,
                width: "5%"
            },  {
                title: "名称",
                data: "name",
                orderable: false,
                width: "10%"
            }, {
                title: "标题",
                data: "title",
                orderable: false,
                width: "10%"
            },  {
                title: "操作",
                orderable: false,
                width: "5%",
                "render": function(data, type, row, meta) {
                    return "<a class='btn btn-danger btn-xs' href='javascript:void(0);'" + "onclick='_deleteMuticolumnAsset(\"" + row['id'] + "\")'>删除</a>";
                }
            }],
            // 分页类型
            "pagingType": "full_numbers",
            "sLoadingRecords": "正在加载数据...",
            "sZeroRecords": "暂无数据",
            // 能否进行搜索
            "searching": false,
            "order": [
                // [1, "asc"]
            ],
            "dom": 'rt<"bottom"iflp<"clear">>',
            "language": {
                "processing": "玩命加载中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有匹配结果",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "url": "",
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "末页"
                }
            },
            _fnPageChange: function() {}
        });
        // 使用col插件实现表格头宽度拖拽
        $("#muticolumn-asset-selected-table").colResizable();

        // 刷新
        $('#muticolumn-asset-table-refresh').on('click', function() {
            // albumAssetTable.draw();
            muticolumnAssetSelectedTable.ajax.reload();
        });
        // 全选
        $('#muticolumn-asset-selected-check-all').on('click', function() {
            $('#muticolumn-asset-selected-table tr input[type="checkbox"][name="checkbox-muticolumn-asset-selected"]').each(function() {
                if ($(this).is(':checked')) {
                    $(this).prop("checked", false);
                } else {
                    $(this).prop("checked", true);
                }
            });
        });
        // 批量删除媒资
        $('#batch-delete-muticolumn-asset').on('click', function() {
            var muticolumn_id = $('#muticolumn_id').val();
            var asset_id = [];
            $('#muticolumn-asset-selected-table tr input[type="checkbox"][name="checkbox-muticolumn-asset-selected"]').each(function() {
                if ($(this).is(':checked')) {
                    asset_id.push($(this).attr("data-id"));
                }
            });
            if (asset_id.length < 1) {
                layer.msg("节目数据不能为空, 请勾选节目数据!", {
                    icon: 5
                });
                return false;
            }
            layer.msg('确定要删除?', {
                time: 0, //不自动关闭,
                btn: ['确定', '取消'],
                yes: function(index) {
                    layer.close(index);
                    // 发送请求
                    $.ajax({
                    url: '/admin/application/muticolumns/asset_datas/delete',
                        type: 'POST',
                        cache: false,
                        dataType: 'json',
                        data: {
                            muticolumn_id: muticolumn_id,
                            asset_id: asset_id
                        },
                        success: function(data) {
                            if (data.status) {
                                layer.alert(data.content, {
                                    icon: 6
                                });
                                // albumAssetTable.draw();
                                muticolumnAssetSelectedTable.draw();
                            } else {
                                layer.msg(data.content, {
                                    icon: 5
                                });
                            }
                        },
                        error: function() {
                            layer.msg("异常！");
                        }
                    });
                }
            });
        });
    });
    /**
     * 删除栏目节目数据
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    function _deleteMuticolumnAsset(id)
    {
        // console.log(123);
        // return;
        var muticolumn_id = $('#muticolumn_id').val();
        var asset_id = id;
        layer.msg('确定要删除?', {
            time: 0, //不自动关闭,
            btn: ['确定', '取消'],
            yes: function(index) {
                layer.close(index);
                // 发送请求
                $.ajax({
                    url: '/admin/application/muticolumns/asset_datas/delete',
                    type: 'POST',
                    cache: false,
                    dataType: 'json',
                    data: {
                        muticolumn_id: muticolumn_id,
                        asset_id: asset_id
                    },
                    success: function(data) {
                        if (data.status) {
                            layer.alert(data.content, {
                                icon: 6
                            });
                            // columnAssetTable.draw();
                            muticolumnAssetSelectedTable.draw();
                        } else {
                            layer.msg(data.content, {
                                icon: 5
                            });
                        }
                    },
                    error: function() {
                        layer.msg("异常！");
                    }
                });
            }
        });
    }
    </script>
@endsection
